<template>
    <div id="content-detail">
        <div class="imgdetail">
          <div class="img-position">
            <img class="imgtitle" id="imgdetail" :src="imgdata.imageUrl" />
            <div class="position-text" :style="{top: Top +'px',left: Left + 'px',color: Color}">{{imgdata.imageText}}</div>
          </div>
            <p>
              <img src="../../static/img/detail_img.png" />
            </p>
        <card>
            <div slot="content" class="card-demo-flex card-demo-content01 detail-img">
                <div class="vux-1px-l vux-1px-r">
                    <div class="qr_code"  >
                      <div v-show="qrcodeShow">
                        <img :src="dataUrl">
                        <canvas ref="canvas" v-show="false"></canvas>
                      </div>
                       <qrcode :fg-color="'#000'" v-show="!qrcodeShow" v-model="codeurl" type="img" class="img_qr"></qrcode>
                    </div>
                    <br/>
                    扫描微信二维码
                </div>
                <div class="vux-1px-r">
                    <div>
                        <img class="fingerprint" src="../../static/img/zhiwenshibie@2x.png" />
                    </div>
                    <br/>
                    长按指纹识别图中二维码
                </div>
            </div>
        </card>
        </div>
    </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import { Card, Qrcode } from 'vux'
import api from '../api'
import utils from '../utils'
import qr from 'qr.js'
export default {
  data () {
    return {
      item: {},
      imgdata: {},
      tokenval: '',
      qrcodeShow: true,
      Top: '',
      Left: '',
      Color: '',
      codeurl: '',
      partnerIdempty: '', // 图片详情partnerid
      userId: '',
      picId: '',
      dataUrl: '',
      logo: '',
      size: 128,
      bgColor: '#fff',
      fgColor: '#000'
    }
  },
  components: {
    Card,
    Qrcode
  },
  created () {
    window.document.title = '图片详情'
    this.tokenval = utils.AnonToken(timeStamp)
    this.picId = utils.getQueryString('picId') || utils.getQueryString('id')
    this.userId = utils.getQueryString('userId')
    var params = {
      picId: this.picId,
      Tokenuser: this.tokenval,
      userid: this.userId,
      timestamp: timeStamp
    }
    api.tagline(params).then(res => {
      console.log(JSON.stringify(res))
      if (res.status === '200') {
        this.imgdata = res.data
        var PositionTEXT = res.data.postion
        console.log(PositionTEXT)
        this.Top = parseFloat(PositionTEXT.split(',')[1])
        this.Left = PositionTEXT.split(',')[0]
        this.Color = res.data.imageTextColor
        if (res.data.partnerId && res.data.partnerId !== undefined && res.data.partnerId !== 'undefined' && res.data.partnerId !== 'null') {
          this.partnerIdempty = res.data.partnerId
          this.codeurl = process.env.BASE_URL + '/creditLogin/index?shareParam=share&userId=' + this.userId + '&partnerId=' + res.data.partnerId + '&picId=' + res.data.id + '&channel=6'
        } else {
          this.codeurl = process.env.BASE_URL + '/creditLogin/index?shareParam=share&userId=' + this.userId + '&picId=' + res.data.id + '&channel=6'
        }
        
        var params = {
          userId: this.$store.state.userID || '',
          partnerId: res.data.partnerId,
        }
        var _this = this
        api.creditloanDetail(params).then(res => {
          console.log(res,12)
          if (res.status === '200') {
            _this.item = res.data
            if (_this.item.qrCodeLogoIsShow) {
              _this.qrcodeShow = true
              // _this.logo = _this.item.logoUrl
              _this.logo = _this.$store.state.logoUrl + _this.item.partnerId + '.png'
              _this.createQr()
            } else {
              _this.qrcodeShow = false
            }
          }
        })
    
      } else if (res.status === '400005016' || res.status === '400006003') {
        this.$router.push('/creditGuest/index')
      }
    })
    this.WXsharecontent()
    utils.refreshShare(this.$wechat, this.$store)
  },
  methods: {
    createQr () {
      const qrcode = qr(this.codeurl)
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const size = this.size / qrcode.moduleCount
      const scale = window.devicePixelRatio / this.getPixelRatio(ctx)
      canvas.height = canvas.width = this.size * scale
      ctx.scale(scale, scale)
      qrcode.modules.forEach((row, rdx) => {
        row.forEach((cell, cdx) => {
          ctx.fillStyle = cell ? this.fgColor : this.bgColor
          var w = (Math.ceil((cdx + 1) * size) - Math.floor(cdx * size))
          ctx.fillRect(Math.round(cdx * size), Math.round(rdx * size), w, w)
        })
      })
      var image = document.createElement('img')
      image.src = this.logo
      image.onload = () => {
        
        var dwidth = this.size * 0.2
        var dx = (this.size - dwidth) / 2
        var dheight = image.height / image.width * dwidth
        var dy = (this.size - dheight) / 2
        image.width = dwidth
        image.height = dheight
        ctx.drawImage(image, dx, dy, dwidth, dheight)
        this.dataUrl = canvas.toDataURL()
      }
    },
    getPixelRatio (ctx) {
      return ctx.webkitBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
    },
    WXsharecontent () {
      var sharetitle
      var sharedesc
      if (this.imgdata.partnerName) {
        sharetitle = this.imgdata.partnerName
      } else {
        sharetitle = '贷款让你快速拿到钱'
      }
      if (this.imgdata.imageText) {
        sharedesc = this.imgdata.imageText
      } else {
        sharedesc = '海量借款平台任意选，简单、快速、安全！'
      }
      var shareimg = this.imgdata.imageUrl
      var shareParams
      var shareUrl = this.$store.state.Url + '/picture/detail'
      if (this.partnerIdempty !== '' && this.partnerIdempty !== undefined && this.partnerIdempty !== null) {
        shareParams = '?shareParam=share&userId=' + this.userId + '&partnerId=' + this.partnerIdempty + '&picId=' + this.picId
      } else {
        shareParams = '?shareParam=share&userId=' + this.userId + '&picId=' + this.picId
      }
      this.$store.commit('changeIndexConf', {
        shareTitle: sharetitle,
        shareDesc: sharedesc,
        shareImg: shareimg,
        shareLink: shareUrl + shareParams
      })
    }
  }
}
</script>
